<template>
    <div class="distributionDetails">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">分布情况</span>
        </div>
        <div class="tabs">
            <div class="tab" :class="{ 'active': activeTab === 'production' }" @click="openTab('production')">生产系统</div>
            <div class="tab" :class="{ 'active': activeTab === 'other' }" @click="openTab('other')">机电系统</div>
        </div>
        <div class="content">
            <div class="item" v-for="(item, index) in state.items" :key="index">
                <img :src="item.image" alt="Image" class="item-image" />
                <div class="item-info">
                    <div class="item-number">{{ item.number }}</div>
                    <div class="item-text">{{ item.text }}</div>
                </div>
            </div>
            <!-- <div class="c_1">
                <div class="c_detail">
                    <div class="img"></div>
                    <div class="text">
                        <div class="num"></div>
                        <div class="text"></div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import icon1 from '@/assets/images/dailyMaintenance/icon1.png';
import icon2 from '@/assets/images/dailyMaintenance/icon2.png';
import icon3 from '@/assets/images/dailyMaintenance/icon3.png';
let activeTab = ref('production')
let state = reactive({
    items: [
        { image: icon1, number: '3,200', text: '锅炉系统' },
        { image: icon2, number: '2,400', text: '汽机系统' },
        { image: icon3, number: '800', text: '公用系统' },
        { image: icon1, number: '3,200', text: '锅炉系统' },
        { image: icon2, number: '2,400', text: '汽机系统' },
        { image: icon3, number: '800', text: '公用系统' },
    ]
})
const openTab = (tabName: any) => {
    activeTab.value = tabName
}

</script>

<style lang="scss" scoped>
.distributionDetails {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(22);
    padding-right: vh(22);
    background: url(@/assets/images/dailyMaintenance/left2.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(284);
    width: vw(422);
    height: vh(232);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .tabs {
        display: flex;
        color: white;
        margin-top: vh(15);

        .tab {
            display: flex;
            align-items: center;
            justify-content: center;
            width: vh(60);
            height: vh(22);
            background: rgba(11, 122, 155, 0.5);
            border-radius: 3px;
            cursor: pointer;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(11);
            transition: background-color 0.3s;
            margin-right: vh(10);
        }

        .tab:hover {
            background-color: rgba(11, 122, 155, 1);
            /* 悬停时改变背景颜色 */
        }

        .active {
            background-color: rgba(11, 122, 155, 1);
            color: #00E3FE;
            border: 1px solid #00BDE5;
        }
    }


    .content {
        display: flex;
        justify-content: space-between;
        height: vh(160);
        flex-wrap: wrap;
        /* 允许换行 */
        justify-content: space-between;

        /* 均匀分配空白 */
        .item {
            display: flex;
            align-items: center;
            /* 垂直居中 */
            width: 33.333% ;
            /* 每个item占据1/3宽度 */
            // border: 1px solid #ccc;
            /* 可选：内边距 */
            box-sizing: border-box;

            /* 包含padding和border */
            .item-image {
                background-size: 100% 100%;
                width: vh(66);
                height: vh(68);
                /* 图片与文字之间的间距 */
            }

            .item-info {
                display: flex;
                flex-direction: column;
                margin-top: vh(10);
                /* 垂直排列 */
                .item-number {
                    font-family: DIN;
                    font-weight: 400;
                    font-size: vh(18);
                    color: #FFAF00;
                }

                .item-text {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #9AB1B6;
                }
            }

        }
    }
}
</style>